<!-- eslint-disable max-len -->
<template>
  <s-table
    class="h100"
    ref="flowConfigTable"
    :columns="columns"
    :data="loadData"
    :showPagination="true"
    rowKey="definitionId"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: setDisableRow,columnWidth:'60px',fixed:true }"
  >
    <!-- 自定义勾选框 -->
    <span slot="noteForSelect">
      <question-mark-tip :tip-title="$t('donotDeleteFlow')" :popupContainer="getPopupContainer" class="setSpecialForSelect">
      </question-mark-tip>
    </span>
    <template #flowName="text, record"> 
      <table-ellipsis :text="record.definitionName"></table-ellipsis>
    </template>
    <template slot="flowCode" slot-scope="text, record">
      <table-ellipsis :text="record.definitionCode"></table-ellipsis>
    </template>
    <template #withdrawType="text, record">
      <table-ellipsis :text="record.cancelType?$options.filters.DictLabelFilter(record.cancelType,cancelTypeEnumArr) : '_'"/>
    </template>
    <template slot="createTime" slot-scope="text">
      <table-ellipsis :text="text ? $options.filters.moment(text) : '_'"></table-ellipsis>
    </template>
    <template #operation="text">
      <span class="set-margin">
        <auth-button type="primary" :ghost="true" size="small" :auth="flowPerms.design.edit" @click="editTbRow(text)"><a-icon type="edit" />{{ $t('edit') }}</auth-button>
      </span>
      <span class="set-margin">
        <auth-button type="primary" :ghost="true" size="small" :auth="flowPerms.design.view" @click="lookTbRow(text)"><a-icon type="eye" />{{ $t('view') }}</auth-button>
      </span>
      <span v-if="!text.isBinded == 1">
        <auth-button type="danger" :ghost="true" size="small" :auth="flowPerms.design.delete" @click="deleteTbRow(text)"><i class="iconfont icon-shanchu deleteUlr"> </i>{{ $t('delete') }}</auth-button>
      </span>
    </template>
  </s-table>
</template>
<script>
import { mapState } from 'vuex'
import STable from '@/components/Table/index'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import AuthText from '@/components/AuthText'
import { flowDesignTbColumns, cancelTypeEnumArr } from '../config/list'
import { flowPerms } from '@/config/permission/index'
import AuthButton from '@/components/AuthButton'
export default {
  components: {
    STable,
    tableEllipsis,
    AuthText,
    QuestionMarkTip,
    AuthButton
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.flowDesign.queryParams
    })
  },
  data () {
    return {
      selectedRowKeys: [],
      columns: flowDesignTbColumns,
      flowPerms,
      cancelTypeEnumArr
    }
  },
  activated(){
    this.refreshData(false)
  },
  methods: {
    // 请求表格数据
    loadData (parameter) {
      const vm = this
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParams))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
      }
      this.$refs.flowConfigTable && this.$refs.flowConfigTable.clearSelected()
      return this.$api.getFlowDesinTableData({ ...parameter, ...JnqueryParam })
    },

    // 表格勾选事件
    onSelectChange (selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
      this.$emit('selectedRowchange', selectedRows)
    },

    // 关联业务的流程勾选框禁用
    setDisableRow (record) {
      return {
        props: {
          disabled: record.isBinded === 1, // 控制表格勾选框是否禁用勾选
          name: record.definitionName
        }
      }
    },
    // 清空表格勾选项
    emptyTableSelction () {
      this.selectedRowKeys = []
    },
    // 刷新表格数据
    refreshData (isToFirstPage = true) {
      let obj = null
      if (isToFirstPage) {
        obj = { current: 1 }
      }
      this.$refs.flowConfigTable.loadData(obj)
    },

    // 点击编辑按钮
    editTbRow (data) {
      this.$emit('operateRow', ['edit', data])
    },

    // 点击删除按钮
    deleteTbRow (data) {
      this.$emit('operateRow', ['delete', data])
    },
    // 查看流程详情
    lookTbRow (data) {
      this.$emit('operateRow', ['look', data])
    },
    getPopupContainer () {
      return document.body
    }
  }
}
</script>
<style lang="less" scoped>
.set-margin {
  margin-right: 12px;
}
.setSpecialForSelect{
  position: absolute;
  left: 42px;
}
</style>
